<template>
	<div class="hitokoto cards">
		<!-- 打开音乐面板 -->
		<!-- <Transition name="fade">
			<div class="open-music" v-show="openMusicShow && store.musicIsOk" @click="store.musicOpenState = true">
				<music-menu theme="filled" size="18" fill="#efefef" />
				<span>打开音乐播放器</span>
			</div>
		</Transition> -->
		<!-- 一言内容 -->
		<div class="content">
			<span class="text">人总是贪婪的，就像最开始，我也只是想知道你的名字。</span>
			<span class="from">你的名字</span>
		</div>
	</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.hitokoto {
	width: 100%;
	height: 100%;
	padding: 20px;
	animation: fade 0.5s;
	animation: fade;
	.open-music {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 4px 0;
		background: #00000026;
		border-radius: 8px 8px 0 0;
		.i-icon {
			display: block;
			width: 18px;
			height: 18px;
			margin-right: 8px;
		}
		span {
			font-size: 0.95rem;
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 100%;
		.text {
			display: -webkit-box;
			overflow: hidden;
			font-size: 1.1rem;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		.from {
			align-self: flex-end;
			margin-top: 10px;
			font-size: 1.1rem;
			font-weight: bold;
		}
	}
}
</style>
